<template>
	<view class="app-content"  >
		<view class="title">
			相册 <span class="tips">(至少上传4张，默认第一张为封面)</span>
		</view>
		<view class="content0" @touchmove="moveDrag" @touchend="endDrag">
			<view class="content">
				<view class="video-item" v-for="(item,index) in fileList1" :key="index" 
				@touchstart="startDrag" 
				:data-index="index"
				>
					<image src="https://pw.qyang.cc/static/delete.png" class="delete" @click="handleDelete(index)">
					</image>
					<image :src="rq.imgUrl(item)" class="video"></image>
				</view>
				<view class="btn" @click="chooseImage">
					<image src="https://pw.qyang.cc/static/pic-add.png" mode=""></image> 添加图片
				</view>
			</view>
			
		</view>
		<view class="bottom">
			<view class="btn" @click="submit">保存</view>
		</view>
		<view class="dragItem" v-if="draggingIndex!== null"  :style="'left:'+(nowX-35)+'px;top:'+(nowY-35)+'px'">
			<image :src="rq.imgUrl(fileList1[draggingIndex])" class="video"></image>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				fileList: [],
				fileList1: [],
				draggingIndex: null,
				startY: 0,
				startX:0,
				offsetY: 0,
				offsetX: 0,
				nowX:0,
				nowY:0,
				statusBarHeight1:0,
				titleBarHeight:0,
				statusBarHeight:0,
				
			};
		},
		onLoad(e) {},
		onShow() {
			uni.$on('photo', (data) => {
				console.log(data)
				if (data) {
					let files = data.split(',')
					this.fileList1 = files
				}

			})
		},
		onUnload() {
			uni.$off('photo')
		},
		onLoad() {
			uni.getSystemInfo({
				success: (res) => {
					// #ifdef MP-WEIXIN
						this.statusBarHeight1 = uni.getMenuButtonBoundingClientRect().top;
						this.titleBarHeight = uni.getMenuButtonBoundingClientRect().height;
						this.statusBarHeight = this.titleBarHeight + this.statusBarHeight1;
					// #endif	
					// #ifndef MP-WEIXIN
						this.statusBarHeight = res.statusBarHeight * 1 + 46;
						this.statusBarHeight1 = res.statusBarHeight;
					// #endif
					
				},
			});
		},
		methods: {
			submit() {
				if (this.fileList1.length < 4) {
					uni.showToast({
						title: `图片不能少于四张`,
						icon: 'none',
						duration: 2000
					});
					return; // 直接返回，阻止后续代码执行，即不进行页面跳转等操作
				}
				const updatedItem = this.fileList1;
				const pages = getCurrentPages();
				const prevPage = pages[pages.length - 2];

				uni.navigateBack({
					success: () => {
						// prevPage.onShow();
						prevPage.$vm.receivePhoto(updatedItem);
					}
				});
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.fileList1.splice(event.index, 1)
			},
			// 新增图片
			chooseImage() {
				let _this = this
				uni.chooseImage({
					sizeType: ['original', 'compressed'],
					sourceType: ['album'],
					crop: {
						quality: 100,
						width: 325,
						height: 325
					},
					success(res) {
						uni.showLoading({
							mask: true,
							title: '正在上传'
						})
						getApp().uploadFile(res.tempFilePaths, {}, (url) => {
							console.log(url)
							_this.fileList1 = [..._this.fileList1, ...url]
							uni.hideLoading()
						})
					}
				})
			},
			handleDelete(index) {
				this.fileList1.splice(index, 1)
			},
			startDrag(event) {
				console.log(event,"event")
			  this.draggingIndex = event.currentTarget.dataset.index;
			  this.startX = event.touches[0].clientX;
			  this.startY = event.touches[0].clientY;
			  this.offsetX = this.startX-event.currentTarget.offsetLeft;
			  this.offsetY = this.startY-event.currentTarget.offsetTop;
			  this.nowX=event.touches[0].clientX;
			  this.nowY=event.touches[0].clientY;
			},
			moveDrag(event){
				if(this.draggingIndex === null)return;
				this.nowX=event.touches[0].clientX;
				this.nowY=event.touches[0].clientY;
				
				console.log(this.nowX+"----"+this.nowY,"this.nowXY")
			},
			endDrag(event) {
			  if (this.draggingIndex !== null) {
				 
				        const element = event.target; // 获取触发事件的元素
				        console.log('Element touched:', element);
				const endX = event.changedTouches[0].clientX;
				const endY = event.changedTouches[0].clientY;
				var diffX = endX - this.startX;
				var diffY = endY - this.startY-this.offsetY;
				
				const threshold = 10; // 拖动阈值，可根据需要调整
				// diffX-=this.offsetX
				// diffY-=this.offsetY
				
				// if (Math.abs(diffY) > threshold) {
					
				/* 计算最新位置 */
				var top=this.statusBarHeight+40+20
				var newIndex = this.draggingIndex;
				
					console.log(event.currentTarget.dataset,"event.currentTarget.dataset")
	
					console.log(diffX+"----"+Math.round(diffX/90),"diffX")
					console.log(diffY+"----"+Math.round(diffY/90)*4,"diffY")
					
					var p= Math.ceil(this.fileList1/4)
					var diffY4=Math.round(diffY/90)*4
					if( diffY4-this.draggingIndex<0){
						/* 纵向最多回到第一排 */
						newIndex=Math.abs(this.draggingIndex-diffY4)%4
						console.log(newIndex,"newIndex")
					}else{
						newIndex+=Math.round(diffY/90)*4
					}
					newIndex+=Math.round(diffX/90)
					console.log(newIndex,"newIndex")
					
					if(newIndex>this.draggingIndex) newIndex++;
					// if(newIndex<this.draggingIndex) newIndex--;
					if(newIndex<0)newIndex=0
					if(newIndex > (this.fileList1.length+1))newIndex=this.fileList1.length
				console.log(newIndex,"newIndex1")
				var newList=[];
				for(var i=0;i<=this.fileList1.length;i++){
					if(i==newIndex){
						newList.push(this.fileList1[this.draggingIndex])
					}
					if(i<this.fileList1.length && i!= this.draggingIndex){
						newList.push(this.fileList1[i])
					}
				}
				this.fileList1=newList;
				// this.$set(this.fileList1, this.draggingIndex, this.fileList1[newIndex]);
				// this.$set(this.fileList1, newIndex, temp);
				
				console.log(this.fileList1,"this.fileList1")
				this.draggingIndex = null;
			  }
			},
			
		}
	}
</script>

<style lang="scss">
	.app-content {
		height: 100vh;
		background-color: #FFFFFF;
	}
	.content0{
		min-height: 800rpx;
		width: 100%;
	}
	.content {
		
		padding: 15rpx;
		display: flex;
		flex-wrap: wrap;
		
		.video-item{
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
		.btn {
			width: 160rpx;
			height: 160rpx;
			border-radius: 8px;
			opacity: 1;
			background: #F7F7F7;
			box-sizing: border-box;
			border: 0.5px solid #C4C4C4;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-size: 10px;
			font-weight: normal;
			line-height: 14px;
			letter-spacing: 0px;

			color: #B8B8B8;

			image {
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
	}

	.title {
		font-family: PingFang SC;
		font-size: 14px;
		font-weight: normal;
		line-height: 22px;
		letter-spacing: 0px;
		height: 50rpx;
		font-variation-settings: "opsz" auto;
		color: #333333;
		padding: 20rpx 30rpx 0;

		.tips {
			font-family: 阿里巴巴普惠体;
			font-size: 10px;
			font-weight: normal;
			line-height: 22px;
			letter-spacing: 0px;

			color: #FF7681;
			margin-left: 10rpx;
		}
	}

	.bottom {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		background-color: #ffffff;
		z-index: 3;

		.btn {
			font-weight: bold;
			font-size: 28rpx;
			color: #FFFFFF;
			line-height: 38rpx;
			text-align: center;
			line-height: 88rpx;
			margin: 15rpx 64rpx;
			background: #FF5866;
			border-radius: 102px;
			border: 1px solid #FF5866;
		}
	}

	.video-list {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	.video-item {
		width: 160rpx;
		height: 160rpx;
		// margin-right: 10rpx;
		position: relative;

		.delete {
			padding: 10rpx;
			position: absolute;
			z-index: 4;
			width: 32rpx;
			height: 32rpx;
			top: -22rpx;
			right: -22rpx;
		}
	}

	.video {
		width: 160rpx;
		height: 160rpx;
	}
	
	.dragItem{
		position: fixed;
		z-index: 999;
		width: 160rpx;
		height: 160rpx;
	}
</style>